<script setup lang="ts">
import { getCurrentInstance } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
console.log("xx", route);
const { proxy }: any = getCurrentInstance();
import { featchRoomList } from "@/api/index";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const open1 = () => {
  proxy.$message("This is a message.");
};
const open2 = () => {
  proxy.$message({
    message: "Congrats, this is a success message.",
    type: "success",
  });
};
const open3 = () => {
  proxy.$message({
    message: "Warning, this is a warning message.",
    type: "warning",
  });
};
const open4 = () => {
  proxy.$message.error("Oops, this is a error message.");
};
const getRoomList = () => {
  featchRoomList();
};

getRoomList();
</script>

<template>
  <h1>{{ t('message.home') }}</h1>
  <button @click="router.push({ path: '/mine', query: { a: 1 } })">
    跳转到个人中心
  </button>
  <div class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </div>
  <el-button :plain="true" @click="open2">Success</el-button>
  <el-button :plain="true" @click="open3">Warning</el-button>
  <el-button :plain="true" @click="open1">Message</el-button>
  <el-button :plain="true" @click="open4">Error</el-button>
</template>

<style scoped lang="scss">
@import "@/assets/scss/home/index.scss";
</style>
